import React, {Component} from 'react'
import './index.css'
import PropTypes from 'prop-types'
import {Tabs} from 'antd-mobile'
const TabPane = Tabs.TabPane

export default class BottomMenu extends Component {

  constructor (props) {
    super(props)
    this.menu = [{
      pathname: '/',
      title: '场馆'
    }, {
      pathname: '/course',
      title: '约课'
    }, {
      pathname: '/user',
      title: '已约'
    }, {
      pathname: '/circle',
      title: '圈子'
    }, {
      pathname: '/mine',
      title: '我的'
    }]
  }

  handleSelected = (pathname) => {
    this.props.handleSelected && this.props.handleSelected(pathname)
  }

  render () {
    return (
      <Tabs className='bottom-menu' onTabClick={this.handleSelected} animated={false} pageSize={5} {...this.props}>
        {
          this.menu.map((item, index) => {
            return (
              <TabPane tab={item.title} key={item.pathname} />
            )
          })
        }
      </Tabs>
    )
  }
}

BottomMenu.propTypes = {
  handleSelected: PropTypes.func
}
